<template>
    <s-modal :visible="visible" title="新建任务" @ok="save()" width="70%" wrapClassName="full-modal"
        @cancel="() => { if (!confirmLoading) { visible = false } }" :confirm-loading="confirmLoading"
        :closable="!confirmLoading" :footer="null" style="margin-top: -30px;">
        <div class="gunD">
            <!-- 任务详情 -->
            <div class="nav">
                <img src="@/assets/imgSrc/bz.png" alt="">
                <span>任务详情</span>
            </div>
            <div class="navCenter">
                <div class="nav-name">
                    <div>任务编号：{{ form.taskCode }}</div>
                    <a-form-item label="任务名称：" :rules="[{ required: true, message: '请输入案件名称' }]">
                        <a-input placeholder="请输入案件名称(限25字)" v-model="form.taskName" />
                    </a-form-item>
                </div>
                <div class='nav-info'>
                    <a-form-item label="任务详情: " :rules="[{ required: true, message: '请输入事项详情' }]">
                        <a-textarea placeholder="请输入事项详情" v-model="form.taskContent" />
                    </a-form-item>
                </div>
                <div class="nav-fuJian">
                    <div>添加附件:</div>
                    <div class="table">
                        <div class="table-title">
                            <div>文件名</div>
                            <div>操作</div>
                        </div>
                        <div class="table-tbody" v-for="item in fileList" :key="item">
                            <div>
                                <div class="addUpLoadText">{{ item.fileName }}</div>
                            </div>
                            <div class="addCz">
                                <span class="icon-xiazai">下载</span>
                                <span class="icon-shanchu2" @click="delFile(item)">删除</span>
                            </div>
                        </div>
                        <div class="table-tbody">
                            <div class="addUpLoad">
                                <a-upload name="file" :action="fullUrl" :headers="headers" @success="handleSuccess"
                                    :before-upload="beforeUpload">
                                    <a-button @change="addNewFile">
                                        <upload-outlined></upload-outlined>
                                        点击上传文件
                                    </a-button>
                                </a-upload>
                            </div>
                            <div class="addCz">
                                <span class="icon-xiazai">下载</span>
                                <span class="icon-shanchu2">删除</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务处置要求 -->
            <div class="nav">
                <img src="@/assets/imgSrc/bz.png" alt="">
                <span>任务处理要求</span>
            </div>
            <div class="navCenter">
                <div class="nav-receivingUnit">
                    <s-form-item label="接收单位：" size="small" name="deptIds" :colon="true" :display-title="true"
                        :rules="[{ required: true, message: '请选择接收单位' }]">
                        <s-select-tree :allow-clear="true" :expand-all="false" :show-search="true" :multiple="true"
                            placeholder="请选择订阅对象" url="/realm/dept/selectList" label-field="text"
                            value-field="contactPeople" key-field="id" parent-key-field="partentId"
                            v-model="form.receivingUnitName" />
                    </s-form-item>
                    <a-form-item label="限时反馈" :rules="[{ required: true, message: '请选择限时反馈时间' }]">
                        <a-date-picker show-time type="date" placeholder="请选择限时反馈时间" style="width: 100%"
                            v-model="form.expirationTime" />
                    </a-form-item>
                    <a-form-item label="短信通知">
                        <a-switch v-model:checked="form.checked" />
                    </a-form-item>
                </div>
                <div class="nav-info" :rules="[{ required: true, message: '请输入备注' }]">
                    <a-form-item label="备注: ">
                        <a-textarea placeholder="请输入备注" v-model="form.taskContent" />
                    </a-form-item>
                </div>
            </div>

            <!-- 发起单位 -->
            <div class="nav">
                <img src="@/assets/imgSrc/bz.png" alt="">
                <span>发起单位</span>
            </div>
            <div class="navCenter">
                <div class="nav-initiateUnits">
                    <div>
                        发起单位:{{ form.initiatorName }}
                    </div>
                    <div>
                        发起时间: {{ form.initiateTimeReturn }}
                    </div>
                    <a-form-item label="联系人" :rules="[{ required: true, message: '请选择联系人' }]">
                        <a-input placeholder="请选择联系人" v-model="form.contactPerson" />
                    </a-form-item>
                    <a-form-item label="联系方式：" :rules="[{ required: true, message: '请输入联系人手机号' }]">
                        <a-input placeholder="请输入联系人手机号" v-model="form.contactPhone" />
                    </a-form-item>
                </div>
            </div>


            <div class="btn">
                <a-button @click="cancellation">取消</a-button>
                <a-button type="primary" @click="save">保存</a-button>
                <a-button type="primary" @click="initiate">发起</a-button>
            </div>
        </div>
    </s-modal>
</template>
  
<script>

const BASIC_URL = import.meta.env.VITE_API_PATH;
export default {
    name: 'Add',
    emits: ['change'],
    data() {
        return {
            BASIC_URL,
            fileList: [], // 文件列表
            headers: {
                // 请求头
                Authorization: 'Bearer token'
            },
            confirmLoading: false,
            visible: false,
            users: [
                { id: 1, name: "John Doe", email: "johndoe@example.com" },
            ],
            form: {
                expirationTime: '',
                initiateTimeReturn: '' // 获取当前时间
            },
        }
    },
    created() {
        this.getCurrentDateTime();
    },
    computed: {
        fullUrl() {
            return `${this.BASIC_URL}/file/uploadDetail`;
        },
    },
    methods: {
        open() {
            this.visible = true
        },
        // 保存
        save() {
            this.$api.PUT('/modules/doorTask/insert').then(res => {
                console.log('任务中心保存', res);
            })
        },
        // 发起
        initiate() {
            const params = {

            }
            this.$api.PUT('/modules/doorTask/insert').then(res => {
                console.log('任务中心发起', res);
            })
        },
        // 取消
        cancellation() {

            this.visible = false
            this.delFile()
        },
        // 删除附件
        delFile(item) {
            console.log(item);
            const params = {
                fileType: item.fileType,
                fileId: item.fileId
            }
            this.$api.GET('/file/delete', params).then(res => {
                console.log('任务中心删除文件', res);
            })
        },
        // 获取当前时间
        getCurrentDateTime() {
            const date = new Date();
            const currentDateTime = `${date.getFullYear()}-${this.formatNumber(date.getMonth() + 1)}-${this.formatNumber(date.getDate())} ${this.formatNumber(date.getHours())}:${this.formatNumber(date.getMinutes())}:${this.formatNumber(date.getSeconds())}`;
            this.form.initiateTimeReturn = currentDateTime;
        },
        // 格式化数字，当数字小于10时在前面补0
        formatNumber(number) {
            return number < 10 ? `0${number}` : `${number}`;
        },
        // 上传成功回调
        handleSuccess(response) {
            const file = response.file;
            const fileName = file.name;
            const newFile = { fileName };
            this.fileList.push(newFile); // 将新文件信息添加到fileList数组中
        },
        // 上传前的钩子
        beforeUpload(file) {
            // 自定义上传逻辑
            return false; // 不执行默认上传行为
        },
        // 删除文件
        delFile(item) {
            const index = this.fileList.indexOf(item);
            if (index !== -1) {
                this.fileList.splice(index, 1);
            }
        },
        // 添加新文件
        addNewFile() {
            const newFile = { fileName: '新文件' };
            this.fileList.push(newFile); // 将新文件信息添加到fileList数组中
        }
    }
}
</script>
  
<style lang="less" scoped>
.shorter-select .ant-select-selector {
    width: 200px;
}

::v-deep(.ant-modal-footer) {
    display: none !important;
    visibility: hidden !important;
}

.gunD {
    overflow: auto;
    height: 680px;
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
}

.nav {
    background-color: #F1F6FE;
    display: flex;
    align-items: center;
    margin-bottom: 40px;

    img {
        padding: 10px 10px;
    }

    span {
        color: #0F5FD7;
        padding: 10px 0px;
    }
}

.navCenter {
    padding: 0 30px 20px 30px;
}

.nav-name {
    display: flex;
    // padding: 30px 10px;

    div:nth-child(2) {
        margin-left: 300px;
    }
}

.nav-receivingUnit {
    display: flex;
    align-items: center;

    div:nth-child(2) {
        padding: 0 50px;
    }
}

.nav-info {
    display: flex;
    padding: 20px 0px;

    textarea {
        margin-left: 30px;
        width: 800px;
        height: 120px;
    }
}

.nav-fuJian {
    display: flex;
    padding-bottom: 10px;

    .table {
        margin-left: 28px;
        width: 800px;
        // text-align: center;
        border: 1px solid #D9D9D9;

        .table-title {
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #D9D9D9;
            padding: 10px 0;
        }

        .table-tbody {
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #D9D9D9;
            padding: 12px 0;

            .addUpLoadText {
                width: 215px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .addUpLoad {
                width: 215px;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    // background: #0F5FD7;
                    padding: 0px 15px;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 20px;
                    margin-right: 10px;
                }

            }

            .addCz {
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    padding: 2px 15px;
                    font-size: 14px;
                    border-radius: 20px;
                    margin-right: 10px;
                }

                span:nth-child(1) {
                    background: #c4e0f0;
                    color: #5AB5FC;
                    border: 0.5px solid #5AB5FC
                }

                span:nth-child(2) {
                    background: #FFEEF1;
                    color: red;
                    border: 1px solid red
                }
            }
        }
    }
}

.nav-initiateUnits {
    display: flex;

    div {
        padding-right: 50px;
    }
}

.btn {
    text-align: center;
    padding-bottom: 30px;

    button {
        width: 120px;
        height: 40px;
        margin: 0 15px;
    }
}
</style>